var Zoom = function(){
	this.width = 300;
	this.height = 300;
	this.scale = 4;
	this.imgURl = "1.jpg";
	this.continer = null;
};
Zoom.prototype = {
	constructer:Zoom,
    init:function(){
		this.createDOM();
		this.bindEvents();
	},
	createDOM:function(){
		//放图片的框
		this.imgDiv = document.createElement("div");
		this.imgDiv.style.cssText = "border:1px solid #ccc;width:"+this.width+"px;height:"+this.height+"px;position:relative;";
		this.continer.appendChild(this.imgDiv);

		//框里的图片
		this.img = document.createElement("img");
		this.img.src = this.imgURl;
		this.img.style.cssText = "width:"+this.width+"px;height:"+this.height+"px;";
		this.imgDiv.appendChild(this.img);

		//框里的小滤镜
		this.tool = document.createElement("div");
		this.tool.style.cssText = "width:" + (this.width / this.scale)
			+ "px;height:"+(this.height / this.scale)+"px;position:absolute;left:0;top:0;background:#FFF;border:1px solid #ccc;overflow:hidden;display:none;";
		this.imgDiv.appendChild(this.tool);
		//滤镜里的图片
		this.toolImg = document.createElement("img");
		this.toolImg.src = this.imgURl;
		this.toolImg.style.cssText = "width:"+this.width+"px;height:"+this.hieght+"px;";
		this.tool.appendChild(this.toolImg);
		//大图片的框
		this.bigDiv = document.createElement("div");
		this.bigDiv.style.cssText = "width:"+this.width+"px;height:"+this.height+"px;position:absolute;left:"+(this.imgDiv.offsetLeft + this.width + 10)+"px;top:"+this.imgDiv.offsetTop+"px;overflow:hidden;display:none;";
		this.continer.appendChild(this.bigDiv);

		//大框里的图片
		this.bigImg = document.createElement("img");
		this.bigImg.src = this.imgURl;
		this.bigImg.style.cssText = "width:"+(this.width * this.scale)+"px;height:"+(this.height * this.scale)+"px;position:absolute;"
		this.bigDiv.appendChild(this.bigImg);
	},
	bindEvents:function(){
		var that = this;
		this.imgDiv.onmouseover = function(){
			that.tool.style.display = "block";
			that.bigDiv.style.display = "block";
			that.img.style.webkitFilter = "blur(5px)";//模层糊要添加给图片
			this.onmousemove = function(e){
				var _e = e||event;
				var x = _e.clientX - that.imgDiv.offsetLeft - that.tool.offsetWidth/2;
				var y = _e.clientY - that.imgDiv.offsetTop - that.tool.offsetHeight/2;
				that.tool.style.left = Math.max(Math.min(x,that.width - that.tool.offsetWidth),0)+ "px";
				that.tool.style.top = Math.max(Math.min(y,that.height - that.tool.offsetHeight),0) + "px";
				that.bigImg.style.marginLeft = that.tool.offsetLeft * that.scale * -1 + "px";
				that.bigImg.style.marginTop = that.tool.offsetTop * that.scale * -1 + "px";				
				
				that.toolImg.style.marginLeft = that.tool.offsetLeft * -1 + "px";
				that.toolImg.style.marginTop = that.tool.offsetTop * -1 + "px";
				
			};
		};
		this.imgDiv.onmouseout = function(){
			that.tool.style.display = "none";
			that.bigDiv.style.display = "none";
			that.img.style.webkitFilter = "blur(0)";	
		};
	},
}